<template>
  <div class="sk">
    <Table :tableData="paneC.tableDataA" @blur="hanleBlur" />
    <section style="margin-top: 30px">
      <span class="title">
        <i class="el-icon-star-on"></i>
        选择产品：
      </span>
      <br />
      <el-checkbox-group v-model="paneC.checkedOptionsB" :max="1">
        <el-checkbox
          v-for="(option, index) in paneC.optionsB"
          :label="option"
          :key="index"
        >
          {{ option }}
        </el-checkbox>
      </el-checkbox-group>
    </section>
    <Card
      v-if="paneC.checkedOptionsB.length"
      :title="paneC.checkedOptionsB[0]"
      style="margin-top: 10px"
    >
      <section>
        <span class="title" style="margin-top: 0">
          <i class="el-icon-star-on"></i>
          产品资费：
        </span>
        <br />
        <el-checkbox-group v-model="paneC.checkedOptionsC" :max="1">
          <el-checkbox
            v-for="(option, index) in paneC.optionsC"
            :label="option"
            :key="index"
          >
            {{ option }}
          </el-checkbox>
        </el-checkbox-group>
        <div style="margin-bottom: 10px">
          ---------------------------------------------------------------------------------------------------------------
          <br />
        </div>
        <el-checkbox-group v-model="paneC.checkedOptionsA" :max="1">
          <el-checkbox
            v-for="(option, index) in paneC.optionsA"
            :label="option"
            :key="index"
          >
            {{ option }}
          </el-checkbox>
        </el-checkbox-group>
      </section>
      <section>
        <span class="title" style="margin-top: 20px">
          <i class="el-icon-star-on"></i>
          产品属性：
        </span>
        <br />
        <el-form inline label-width="140px" size="small">
          <el-form-item label="集团管理员姓名">
            <el-input v-model="paneC.form.valA"></el-input>
          </el-form-item>
          <el-form-item label="集团管理员手机号码">
            <el-input v-model="paneC.form.valB"></el-input>
          </el-form-item>
          <el-form-item label="集团管理员邮箱">
            <el-input v-model="paneC.form.valC"></el-input>
          </el-form-item>
        </el-form>
      </section>
    </Card>
    <section>
      <span class="title">
        <i class="el-icon-star-on"></i>
        其他信息：
      </span>
      <br />
      <Table :tableData="paneC.tableDataD" />
    </section>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },
  data() {
    return {
      paneC: {
        tableDataA: {
          col: [
            {
              prop: 'colA',
              label: '客户名称',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '客户编码',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '客户所在地',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '是否VIP',
              type: 'Input'
            },
            {
              prop: 'colE',
              label: '合同信息'
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: '',
              colE: ''
            }
          ]
        },
        tableDataD: {
          col: [
            {
              prop: 'colA',
              label: '客户经理名称'
            },
            {
              prop: 'colB',
              label: '客户经理电话'
            }
          ],
          row: []
        },
        form: {
          valA: '',
          valB: '',
          valC: ''
        },
        checkedOptionsA: [
          '会议包月费，每成员每月x元（包月），默认参考标准资费75元'
        ],
        radio: 0,
        optionsA: [
          '会议包月费，每成员每月x元（包月），默认参考标准资费75元',
          '会议包月费，每成员每月x元（首月按天），默认参考标准资费75元',
          '云视党建包月费：x元/月用户，标准资费15元，低于10元送总部业务管理员审批',
          '会议开发包月费（集成业务），单路会议每月X元（包月），标准资费100元，低于标准资费需送总部业务管理员审批，首月按月计费',
          '会议并发包月费（集成业务），单路会议每月X元（包月），标准资费100元，低于标准资费需送总部业务管理员审批，首月按天计费'
        ],
        checkedOptionsC: ['测试期资费（试期资费：0元试用，当月截止）'],
        optionsC: [
          '测试期资费（试期资费：0元试用，当月截止）',
          '测试期资费（试期资费：0元试用，下月截止）',
          '测试期资费（试期资费：0元试用，下下月截止）'
        ],
        checkedOptionsB: [],
        optionsB: ['多媒体会议', '高清会议', '语音通话']
      }
    }
  },
  methods: {
    hanleBlur() {
      this.paneC.tableDataA.row = [
        {
          colA: '方石集团',
          colB: 'A3265523682',
          colD: '是',
          colE: '万利集团.pdf'
        }
      ]
      this.paneC.tableDataD.row = [
        {
          colA: '韩飞',
          colB: '13563412589'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  display: block;
  margin-top: 20px;
}
.sk {
  height: 66vh;
  overflow-y: scroll;
}
</style>
